<template>
<transition name="slide">
    <music-list :songs="songs" :title="title" :bg-image="bgImage"></music-list>
</transition>
</template>

<script type="text/ecmascript-6">
import { mapGetters } from "vuex";
import { getSingerDetail } from "api/singer";
import { ERR_OK } from "api/config";
import {createSong} from 'common/js/song'
import MusicList from 'components/music-list/music-list'


export default {
  computed: {
      title(){
          return this.singer.name;
      },
      bgImage() {
        return this.singer.avatar
      },

    ...mapGetters(["singer"])
  },
  data() {
      return {
          songs:[]
      }  
  },

  created() {
    console.log(this.singer);
    this._getDetail();
  },

  
  methods: {
    _getDetail() {
        //边界情况，如果没有点击选择歌手，就回退到歌手列表
      if (!this.singer.id) {
          this.$router.push('/singer')
          return;
      }
      getSingerDetail(this.singer.id).then(res => {
        if (res.code === ERR_OK) {
          console.log("成功接盘歌手详情", res);
		  this.songs=this._normallizeSongs(res.data.list)
        }
      });
    },

    _normallizeSongs(list) {
        let ret=[];

        console.log(list)
        list.forEach((item)=>{
           let {musicData}=item;
           if(musicData.songid && musicData.albummid) {
               ret.push(createSong(musicData))
           }
        })
        console.log('组装后的歌曲列表',ret)
        return ret;
    }
  },
  components: {
      MusicList
  }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';

.singer-detail {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: $color-background;
}

.slide-enter-active, .slide-leave-active {
    transition: all 0.3s;
}

.slide-enter, .slide-leave-to {
    transform: translate3d(100%, 0, 0);
}
</style>
